<template>
  <ul
    theme="dark"
    class="nav-list ant-menu ant-menu-vertical ant-menu-root ant-menu-dark"
  >
    <li class="menu-item ant-menu-item">
      <router-link to="/" active-class="nav_active" :exact="true">
        <a-icon class="icon" type="phone" theme="filled"></a-icon>
        <span class="text">电话记录</span>
      </router-link>
    </li>
    <li class="menu-item ant-menu-item">
      <router-link to="/talk" active-class="nav_active">
        <a-icon class="icon" type="build" theme="filled"></a-icon>
        <span class="text">自定义话术</span>
      </router-link>
    </li>
    <li class="menu-item ant-menu-item">
      <router-link to="/settings" active-class="nav_active">
        <a-icon class="icon" type="setting" theme="filled"></a-icon>
        <span class="text">系统设置</span>
      </router-link>
    </li>
    
  </ul>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {},
  computed: {}
};
</script>

<style lang="less" scoped>
.nav-list {
  color: #fff;
  position: absolute;
  left: 140px;top:0;
  .menu-item {
    padding-left: 0 16px;
  }
  li.menu-item {
    margin: 10px 0;
    display: inline-block;
  }

  span.text {
    display: inline-block;
    overflow: hidden;
    //max-width: 70px;
    //text-overflow: ellipsis;//...
    white-space: nowrap;
    vertical-align: middle;
    transition: width 0.2s ease;
    transition: opacity 0.2s ease;
    font-size: 16px;
    opacity: 1;
  }
  i.icon {
    transform: translateX(0px);
    transition: font-size 0.2s ease, transform 0.2s ease;
    vertical-align: middle;
    font-size: 14px;
    line-height: 10px;
  }
  a.nav_active{
    color: #fff;
  }
}
</style>